@use './themes/light.scss' as light;
@use './themes/dark.scss' as dark;
@use './themes/darkDimmed.scss' as darkDimmed;
@use './themes/darkHighContrast.scss' as darkHighContrast;
@use './themes/darkColorblind.scss' as darkColorblind;
@use './themes/lightColorblind.scss' as lightColorblind;

@mixin setVariables($variables) {
  @each $name, $value in $variables {
    --gitako-#{$name}: #{$value};
  }
}

:root {
  // default, e.g. when not login
  @include setVariables(light.$variables);

  // mapping 'canvas' to 'bg', this should be removed once GitHub exposes 'bg' colors
  --gitako-bg-default-transparent: var(--gitako-canvas-default-transparent);
  --gitako-bg-default: var(--gitako-canvas-default);
  --gitako-bg-inset: var(--gitako-canvas-inset);
  --gitako-bg-overlay: var(--gitako-canvas-overlay);
  --gitako-bg-subtle: var(--gitako-canvas-subtle);
}

@mixin theme($themeName, $variables) {
  :root {
    &[data-color-mode='light'][data-light-theme='#{$themeName}'],
    &[data-color-mode='dark'][data-dark-theme='#{$themeName}'] {
      @include setVariables($variables);
    }

    &[data-color-mode='auto'] {
      &[data-light-theme='#{$themeName}'] {
        @media (prefers-color-scheme: light) {
          @include setVariables($variables);
        }
      }

      &[data-dark-theme='#{$themeName}'] {
        @media (prefers-color-scheme: dark) {
          @include setVariables($variables);
        }
      }
    }
  }
}

@include theme('light', light.$variables);
@include theme('dark', dark.$variables);
@include theme('dark_dimmed', darkDimmed.$variables);
@include theme('dark_high_contrast', darkHighContrast.$variables);
@include theme('light_colorblind', lightColorblind.$variables);
@include theme('dark_colorblind', darkColorblind.$variables);
